<template>
  <Dialog v-model="dialogVisible" title="接单二维码" width="420" draggable>
    <section>
      <div>
        <span class="text-icon purchaser">采</span>
        <span>{{result.purchaserName || '-'}}</span>
      </div>
      <div>
        <span class="text-icon supplier">供</span>
        <span>{{result.supplierName || '-'}}</span>
      </div>
      <div>
        <span class="text-icon loading">装</span>
        <span>{{result.loadingSiteName || '-'}}</span>
      </div>
      <div>
        <span class="text-icon unloading">卸</span>
        <span>{{result.landingPlaceName || '-'}}</span>
      </div>
      <div>
        <span class="text-icon telephone">电</span>
        <span>{{result.purchaserPhone || '-'}}</span>
      </div>
      <div class="text-center">
        <span>
          <span v-if="result.landingPointName">{{result.landingPointName}}</span>
          <span v-if="result.landingPointName"> |
          </span>{{result.productName}}</span>
      </div>
      <div class="qr-box">
        <Qrcode :text="content" :width="280" :options="options"></Qrcode>
      </div>
    </section>
    <template #footer>
      <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
    </template>
  </Dialog>
</template>
<script lang="ts" setup>
  import { getTenantId } from '@/utils/auth'
  import * as salesPlanApi from '@/api/salesPlan'

  const dialogVisible = ref(false)
  const dialogTitle = ref()
  const result = ref({})
  const content = ref('')
  const options = ref({
    margin: 0,
    width: 280,
    height: 280,
    correctLevel: "H"
  })

  const open = async (data) => {
    result.value = data
    dialogVisible.value = true
    // mode: 1或者null为H5,2为小程序
    const mode = await salesPlanApi.getOrderReceiveMode({ tenantId: data.tenantId })
    if (mode === 2) {
      content.value = `${import.meta.env.VITE_DRIVER_URL}?appid=${import.meta.env.VITE_DRIVER_APPID}&path=/pages/order-receiving/order-receiving?planId=${data.planNo}&tenantId=${data.tenantId}&onlineGoodsSwitch=${data.onlineGoodsConfiguration}#wechat-redirect`
    } else {
      content.value = `${import.meta.env.VITE_H5_URL}/login.html?id=${data.id}&flag=0`
    }
  }

  defineExpose({ open })
</script>
<style lang="scss" scoped>
  .custom-dialog .el-dialog__body {
    color: #303133;
    padding: 20px 24px !important;
  }

  section {
    >div {
      margin-bottom: 10px;
    }

    > :nth-child(5) {
      padding-bottom: 16px;
      border-bottom: 1px solid #E7E7E7;
    }

    .qr-box {
      text-align: center;
      margin-top: 16px;
    }
  }

  .text-icon {
    text-align: center;
    display: inline-block;
    font-size: 14px;
    margin-right: 8px;
    color: #ffffff;
    border-radius: 4px;
    font-weight: 400;
    width: 30px;
  }

  .purchaser {
    background-color: #9478F9;
  }

  .supplier {
    background-color: #67C23A;
  }

  .loading {
    background-color: #409EFE;
  }

  .unloading {
    background-color: #E6A23C;
  }

  .telephone {
    background-color: #909399;
  }
</style>